<!DOCTYPE html>
<html xmlns:http="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">-->
    <title th:text="${vodInfo.title}">直播间详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">

    <style>

        .player {
            width: 100%;
            height: 200px;
            background-color: black;
        }

        #msg-list {
            /*height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;*/
        }

        .msg-item {
            padding: 12px 8px;
        / / clear: both;
        }

        .msg-item .msg-user {
        / / width: 38 px;
            height: 38px;
            line-height: 38px;
            font-size: 14px;
        / / border: solid 1 px #d3d3d3;
            display: inline-block;
        / / background: #fff;
        / / border-radius: 3 px;
        / / vertical-align: top;
            text-align: center;
        / / float: left;
        / / padding: 3 px;
            margin-left: 3px;
            color: rgba(22, 11, 9, 0.77);
        }

        .msg-item .msg-user-img {
            width: 38px;
            height: 38px;
            display: inline-block;
            border-radius: 50%;
            vertical-align: top;
            text-align: center;
        / / float: left;
            color: #ddd;
        }

        .msg-item .msg-content {
            display: block;
            border-radius: 5px;
            border: solid 1px #d3d3d3;
            background-color: #FFFFFF;
            color: #333;
            padding: 8px;
            vertical-align: top;
            font-size: 13px;
            position: relative;
            margin: 0px 40px;
            max-width: 85%;
            min-width: 35px;
        / / float: left;
        }

        .msg-item .msg-content .msg-content-inner {
            overflow-x: hidden;
        }

        .msg-item .msg-content .msg-content-arrow {
            position: absolute;
            border: solid 1px #d3d3d3;
            border-right: none;
            border-top: none;
            background-color: #FFFFFF;
            width: 10px;
            height: 10px;
            left: -5px;
            top: 12px;
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }

        .msg-item-self .msg-user,
        .msg-item-self .msg-content {
            float: right;
        }

        .msg-item-self .msg-content .msg-content-arrow {
            left: auto;
            right: -5px;
            -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
        }

        .msg-item-self .msg-content,
        .msg-item-self .msg-content .msg-content-arrow {
            background-color: #4CD964;
            color: #fff;
            border-color: #2AC845;
        }

        footer {
            position: fixed;
            width: 100%;
            height: 50px;
            min-height: 50px;
            border-top: solid 1px #bbb;
            left: 0px;
            bottom: 0px;
            overflow: hidden;
            padding: 0px 50px;
            background-color: #fafafa;
        }

        .footer-right {
            position: absolute;
            width: 15%;
            height: 50px;
            right: 0px;
            bottom: 0px;
            text-align: center;
            vertical-align: middle;
            line-height: 100%;
            padding: 17px 5px;
            display: inline-block;
        }

        .footer-center {
            height: 100%;
            padding: 5px 3px;
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 85%;
        }

        .footer-center [class*=input] {
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .footer-center .input-text {
            background: #fff;
            border: solid 1px #ddd;
            padding: 10px !important;
            font-size: 16px !important;
            line-height: 18px !important;
            font-family: verdana !important;
            resize: none;
            overflow: hidden;
        }

        .login-panel {
            position: relative;
            margin-bottom: 0px;
            height: 150px;
            display: none;
            background-color: white;
            z-index: 1000;
        }

        .comment-input {
            position: relative;
            margin-bottom: 0px;
            height: 145px;
            display: none;
            background-color: white;
            z-index: 1000;
        }

        .login-title {
            height: 36px;
            line-height: 36px;
            text-align: center;
            background-color: rgba(232, 8, 8, 0.77);
        }

        .login-icon {
            margin-top: 15px;
        }

        .footer {
            width: 100%;
            height: 42px;
            background: white;
        / / position: absolute;
        / / bottom: 0;
            padding: 2px;
        }

        .footer input {
            width: 82%;
            height: 38px;
            outline: none;
            font-size: 17px;
            text-indent: 10px;
            position: absolute;
            border: none;
        }

        .footer span {
            display: inline-block;
            width: 15%;
            height: 38px;
            background: #ccc;
            font-weight: 900;
            line-height: 38px;
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: 5px;
            border-radius: 5px;
        }

        .footer span:hover {
            color: #fff;
            background: #999;
        }

        .content-block {
            margin: 0px;
        }

        .tag {
            float: right;
            display: inline-block;
            height: 22px;
            line-height: 22px;
            margin: 0px 8px 3px 15px;
            padding: 0px 8px;
            border: 1px solid #e9eaec;
            border-radius: 3px;
            font-size: 12px;
            vertical-align: middle;
            opacity: 1;
            overflow: hidden;
            cursor: pointer;
        }

        .tag-text {

        }

        .online-account {
            position: fixed;
            width: 100%;
            top: 200px;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            background-color: #efeff4;
            padding-left: 10px;
        }

        .chat-tab {
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            position: absolute;
            top: 270px;
            width: 100%;
            bottom: 0px;
            padding-bottom: 5px
        }

        .desc-tab {
            position: absolute;
            top: 270px;
            width: 100%;
            bottom: 0px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 5px
        }

        .my-tab {
            position: absolute;
            top: 270px;
            width: 100%;
            bottom: 0px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 5px
        }

        .comment-time {
            float: right;
            font-size: 12px;
            margin-top: 5px;
        }

        .loadMore {
            text-align: center;
            margin-top: 12px;
        }

        .send-comment {
            width: 45px;
            height: 45px;
            line-height: 45px;
            background-color: rgba(232, 8, 8, 0.77);
            border-radius: 22.5px;
            text-align: center;
            position: fixed;
            bottom: 12px;
            right: 8px;
            color: white;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="content">
        <!-- 这里是视频区域-->
        <div class="player" id="video" style="position: fixed;">
                <div id="no-video-error" style="display: none; width: 33.3333%;margin-left: 33.333%;margin-top: 50px">
                    <p style="" ><a href="#" class="button button-big">视频不见啦~</a></p>
                    <p >错误码：2333</p>
                </div>
        </div>
        <!--在线人数统计栏-->
        <div id="onlineAccontPanel" class="online-account">
            <span th:text="'历史观看:'+${vodInfo.visitedNumber}+'人'">3251人</span>
        </div>
        <!--菜单栏开始-->
        <div class="buttons-tab theme-dark" style="position: fixed;width: 100%;top:230px">
            <a href="#descTab" class="tab-link active button">简介</a>
            <a href="#chatTab" class="tab-link  button">评论区</a>
            <a th:each="tab : ${vodInfo.tabs}" th:href="'#'+${tab.liveRoomTabId}"
               th:text="${tab.tabName}" class="tab-link button"></a>
        </div>
        <!--菜单栏结束-->
        <div class="">
            <div class="tabs">
                <!--自定义面板列表开始-->
                <div th:each="tab : ${vodInfo.tabs}" th:id="${tab.liveRoomTabId}" class="tab my-tab">
                    <div class="content-block" th:utext="${tab.tabContent}">

                    </div>
                </div>
                <!--自定义面板列表结束-->
                <!--直播间简介面板开始-->
                <div id="descTab" class="tab active desc-tab">
                    <!--标题区域开始-->
                    <div class="" style="margin-left: 0.75em">
                        <div style="margin: 8px 8px 0px 0px;">
                            <p th:text="${vodInfo.title}" style="display: inline"></p>
                            <div class="tag" style="background-color: #f7a72d">
                                <span class="tag-text"  style="">回看</span>
                            </div>

                        </div>

                    </div>
                    <p style="font-size: 12px;margin-top: 5px; margin-left: 1em"
                       th:text="'时间:'+ ${#calendars.format(vodInfo.timeStart,'yyyy-MM-dd HH:mm')}"></p>
                    <!--标题区域结束-->
                    <hr style="border:0;background-color:rgba(22,11,9,0.4);height:1px;">
                    <!--活动简介区域开始-->
                    <div style="margin-left: 0.75em">
                        <span style="display: inline-block;height: 12px;width: 5px;background-color: #2AC845"></span>
                        <span style="margin-left: 5px">活动简介</span>
                    </div>
                    <div class="content-block" style="position: relative" th:utext="${vodInfo.roomDesc}">

                    </div>
                    <!--活动简介区域结束-->
                </div>
                <!--评论区域开始-->
                <div id="chatTab" class="tab chat-tab infinite-scroll">
                    <div style="padding: 8px 8px 0px 8px;font-size: 14px;">
                            <span style="display: inline-block;height: 12px;width: 5px;background-color: #2AC845">
                            </span>
                        <span>最新评论</span>
                    </div>
                    <!--评论内容列表开始-->
                    <div class="" id="msg-list">
                        <!--<div class='msg-item'>
                            <img class='msg-user-img' src="http://owggex94j.bkt.clouddn.com/image/ott/qq.png"
                                 alt=''/>
                            <span class='msg-user'>郭志峰123
                            </span>
                            <i class="fa fa-thumbs-up" style="font-size:16px; float: right; height: 38px;
line-height: 38px;" aria-hidden="true"><span style="margin-left: 3px">215</span></i>


                            <div class='msg-content'>
                                <div class='msg-content-inner'>
                                    这车多高，多长，离地最大距离多少，后排放倒平整吗？
                                </div>
                            </div>
                            <div class="comment-time">
                                <time>2017-05-15 12:00</time>
                            </div>
                        </div>-->
                    </div>
                    <!--右下角评论小图标-->
                    <div class="send-comment" onclick="goComment()">
                        <span>评</span>
                    </div>
                    <!-- 加载提示符 -->
                    <div class="loadMore" id="loadMore" style="display: none">
                        <a href="#" onclick="getComments()">点击加载更多</a>
                    </div>
                    <div class="loadMore" id="noMore" style="display: none">
                        没有更多了
                    </div>
                    <!--评论内容列表结束-->
                    <div class="" style="position:fixed;bottom:0px;width:100%;z-index:1000;">
                        <!--表情选择区开始-->
                        <!--<div class="row no-gutter input-emoji" id="emojis">

                        </div>-->
                        <!--评论输入面板开始-->
                        <div class="comment-input" id="commentInput">
                            <header class="bar bar-nav">
                                <button class="button pull-left" onclick="toggleCommentPanel()">
                                    取消
                                </button>
                                <button class="button pull-right" onclick="sendComment()">
                                    发表
                                </button>
                            </header>
                            <div>
                                <div class="item-input">
                                    <textarea id="commentArea"
                                              style="margin-top: 45px;width: 100%;height: 100px;"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--评论输入面板结束-->
                        <!--第三方登录面板开始-->
                        <div class="row no-gutter login-panel" id="loginPanel">
                            <div class="login-title">
                                <span style="font-size: 14px;margin-left: 20px;color: white">用户登录</span>
                                <span class="icon icon-down" onclick="toggleLoginPanel()"
                                      style="float: right; margin-right: 20px;color: white"></span>
                                <!--<span style="float: right; margin-right: 5px">x</span>-->
                            </div>
                            <div class="login-icon">
                                <div class="row">
                                    <div class="col-50" style="text-align: center" onclick="qqlogin()">
                                        <img src="http://owggex94j.bkt.clouddn.com/image/ott/qq.png"
                                             style="width: 48px;height:48px">
                                        <p style="margin: 0px;font-size: 14px">QQ登录</p>
                                    </div>
                                    <div class="col-50" style="text-align: center" onclick="weiboLogin()">
                                        <img src="http://owggex94j.bkt.clouddn.com/image/ott/weibo.png"
                                             style="width: 48px;height:48px">
                                        <p style="margin: 0px;font-size: 14px">微博登录</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!--第三方登录面板结束-->

                    </div>

                </div>
                <!--评论区域开始结束-->

            </div>

        </div>
    </div>
</div>
</div>

<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.js' charset='utf-8'></script>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>-->
<!--<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
<script src="/zepto.cookie.js"></script>


<script th:inline="javascript">
    $(document).ready(function () {
        userInfo = [[${vodInfo.userInfo}]]
        console.log(userInfo)
        if (userInfo.name && userInfo.uid && userInfo.avatar){
            //用户已经登录
            $.fn.cookie('userInfo',JSON.stringify(userInfo),{ expires : 7 })
        }
        //检测登录状态
        if ($.fn.cookie('userInfo') != null){
            //用户已经登录
            userInfo = JSON.parse($.fn.cookie('userInfo'))
        }

        getComments()

        //>>>>>>>加载直播地址<<<<<<<
        //初始化视频播放器
        var repalyList = []
        var palyIndex = 0
        repalyList = [[${vodInfo.replayUrls}]]
        if (repalyList.length > 0){
            var player = new TcPlayer("video", {
                "auto_play": true,
                "height": 200,
                //"m3u8": "http://1251132611.vod2.myqcloud.com/4126dd3evodtransgzp1251132611/8a592f8b9031868222950257296/f0.f230.m3u8",
                "m3u8": repalyList[palyIndex],
                "coverpic": [[${vodInfo.videoPoster}]],
               // "controls": "system",
                "x5_player": true,
                "x5_type": "h5",
                "x5_fullscreen":true,
                "listener":function (msg) {
                    if (msg.type == "ended"){
                        //播放视频列表
                        if (palyIndex < repalyList.length-1) {
                            palyIndex ++ ;
                            player.video.options.src = repalyList[palyIndex]
                            player.load()
                            player.play()
                        }else {
                            palyIndex =0
                            player.video.options.src = repalyList[palyIndex]
                            player.load()
                            player.play()
                        }
                    }
                }
            });
        }else {
            $('#no-video-error').show()
        }

        $.init();

    });
    //用户登录信息
    var userInfo = {
       /* avatar:'',
        name:'',
        uid:''*/
    }
    //翻页信息
    var page = {
        currPage: 0,//当前页
        totalPage: null,
        liveRoomId: [[${vodInfo.roomId}]],
        limit: 10
    }
    //填充评论
    function getComments() {
        $('#loadMore').show();
        $('#noMore').hide();
        var url = '/live_room_comment?liveRoomId=' + page.liveRoomId + '&page=' + (page.currPage+1) + '&limit=' + page.limit
        $.get(url, function (data, status) {
            if (data.code == 0) {
                page.totalPage = data.page.totalPage
                page.currPage = data.page.currPage
                if (page.currPage == data.page.totalPage) {
                    loadMore(data.page.list)
                    //最后一页了
                    $('#noMore').show();
                    $('#loadMore').hide();
                }else {
                    loadMore(data.page.list)
                }
            }
        })
    }
    //加载更多评论
    function loadMore(comments) {
        for (var i = 0; i < comments.length; i++) {
            appendCommentHtml(comments[i].avatar, comments[i].nickName, comments[i].commentUp, comments[i].liveRoomCommentId, comments[i].comment, comments[i].commentTime)
        }
    }
    //动态添加评论内容
    function appendCommentHtml(avatarUrl, nickname, upNum, commentId, commentContent, commentTime) {
        var commentItem = "<div class='msg-item'>" +
            "<img class='msg-user-img' src='" + avatarUrl +
            "' alt='头像'/>" +
            "<span class='msg-user'>" + nickname +
            "</span>" +
            "<i  data-commentid='" +commentId +
            "' class='fa fa-thumbs-up' onclick='upComment(this)' style='font-size:16px; float: right; height: 38px;line-height: 38px;' aria-hidden >" +
            "<span id='" + commentId +
            "' style='margin-left: 3px'>" + upNum +
            "</span></i>" +
            "<div class='msg-content'>" +
            " <div class='msg-content-inner'>" + commentContent +
            "</div>" +
            "</div>" +
            "<div class='comment-time'>" +
            "<time>" + commentTime +
            "</time>" +
            "</div>" +
            "</div>"
        $('#msg-list').append(commentItem)
    }
    //显示和隐藏评论输入面板
    function toggleCommentPanel() {
        $('#commentInput').toggle()
        $('#commentArea').focus()
    }
    //显示第三方登录
    function toggleLoginPanel() {
        $('#loginPanel').toggle()
    }
    //点赞
    function upComment(comment){
        //console.log(comment)
        var commentId = comment.dataset.commentid
        $.ajax({
            url: '/live_room_comment/vote?comment_id=' + commentId,
            type: 'get',
            async: false,
            success: function (data) {
                //console.log(data)
                if (data.votes == 0){
                    //取消投票
                    var id = '#'+commentId
                    $(id)[0].innerText = parseInt($(id)[0].innerText) - 1
                }
                if (data.votes == 1){
                    //投票有效
                    var id = '#'+commentId
                    $(id)[0].innerText = parseInt($(id)[0].innerText) + 1

                }
            },
            error: function () {
                console.log('网络错误')
            }
        })
    }
    //评论前检测用户是否登录
    function goComment() {
        if ($.fn.cookie('userInfo')) {
            //用户已经登录
            toggleCommentPanel();
        } else {
            toggleLoginPanel();
        }
    }
    //向后台发送评论内容
    function sendComment() {
        var comment = $('#commentArea').val()
        if (comment == '' || comment == null){
            return false;
        }
        var commentInfo = {
            liveRoomId: [[${vodInfo.roomId}]],
            nickName: userInfo.name,
            avatar: userInfo.avatar,
            comment: comment
        }
        $.ajax({
            url: '/live_room_comment/submit',
            type: 'post',
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data : JSON.stringify(commentInfo),
            success: function (data) {
                if (data.code == 0){
                    $('#commentArea').val('')
                    $('#msg-list').html('')
                    toggleCommentPanel()
                    page = {
                        currPage: 0,//当前页
                        totalPage: null,
                        liveRoomId: [[${vodInfo.roomId}]],
                        limit: 10
                    }
                    getComments()
                }
                //连接融云服务器
                console.log(data)
            },
            error: function () {
                console.log('网络错误')
            }
        })

    }
    //qq登录
    function qqlogin() {
        window.location.href="https://graph.qq.com/oauth2.0/authorize?client_id=101431637&response_type=code&display=mobile&redirect_uri=http://www.jackhoo.cn/oauth/qq&state="+location.href;
    }
    //微博登录
    function weiboLogin() {
        window.location.href="https://api.weibo.com/oauth2/authorize?client_id=2725134099&response_type=code&redirect_uri=http://www.jackhoo.cn/oauth/weibo&state="+location.href;
    }


</script>

</body>

